.container {
  height: 95vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  background-color: silver;
  padding: 15px;
  --shadow-color: 0deg 0% 46%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
}

.container > div:first-child {
  justify-self: end;
}
.container > div:last-child {
  justify-self: start;
}

.container > div {
  border-radius: 2px;
  padding: 15px;
  background-color: white;
  box-shadow: var(--shadow-elevation-medium);
}

.uiHolder {
  outline: 1px solid green;
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content);
}
